<template>
  <div class="about">
    <div class="tab">
      <!-- 卡片视图区域 -->
      <el-card>
        <!-- 搜索与添加区域 -->
        <el-row>
          <el-col :span="6">
            <el-input
              size="small"
              v-model="searchName"
              placeholder="请输入查找的员工姓名"
            >
              <el-button
                slot="append"
                @click="searchByName"
                icon="el-icon-search"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="2">
            <el-button
              size="small"
              icon="el-icon-circle-plus-outline"
              type="primary"
              @click="dialogFormVisible = true"
              >添加员工</el-button
            >
          </el-col>
          <el-col :span="2">
            <el-button
              size="small"
              icon="el-icon-remove-outline"
              type="warning"
              @click="departFormVisible = true"
              >员工离职</el-button
            >
          </el-col>
        </el-row>
      </el-card>
      <el-table :data="paginationList" border>
        <el-table-column
          type="index"
          align="center"
          prop="id"
          width="60"
        ></el-table-column>
        <el-table-column
          prop="employees_name"
          align="center"
          label="员工名称"
          width="150"
        ></el-table-column>
        <el-table-column
          prop="contact_info"
          align="center"
          label="联系信息"
          width="200"
        ></el-table-column>
        <el-table-column
          prop="employeesWages"
          align="center"
          label="员工工资"
          width="150"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.employeesWages !== undefined">{{
              scope.row.employeesWages
            }}</span>
            <div class="slash-filled" v-else></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="positionType_name"
          align="center"
          label="类型名称"
          width="190"
        ></el-table-column>
        <el-table-column
          label="状态"
          width="190"
          align="center"
          prop="employeeStatus"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.employeeStatus === true" type="success"
              >在岗</el-tag
            >
            <el-tag v-if="scope.row.employeeStatus === false" type="warning"
              >离职</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="operate" align="center" width="241" label="操作">
          <template slot-scope="scope">
            <!-- 修改 -->
            <el-button
              type="text"
              @click="openDialogFormUpdate(scope.row)"
              icon="el-icon-edit"
              size="mini"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationBlock" style="margin-top: 15px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[7, 15, 20, 25]"
          :page-size="pageSize"
          layout="total,sizes, prev, pager, next,jumper"
          :total="employeeList.length"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 测试提交 -->
    <!-- 添加台球模态框 -->
    <el-dialog title="添加台球" :visible.sync="dialogFormVisible" width="35%">
      <!-- 对话框主体区域 -->
      <el-form
        :model="addEmployeeObj"
        :rules="addEmployeeRules"
        ref="addEmployeeFormRef"
        label-width="100px"
      >
        <el-form-item label="员工名称:" prop="employees_name">
          <el-input v-model="addEmployeeObj.employees_name"></el-input>
        </el-form-item>
        <el-form-item label="联系信息:" prop="contact_info">
          <el-input v-model="addEmployeeObj.contact_info"></el-input>
        </el-form-item>
        <el-form-item label="员工类型:">
          <el-select
            style="width: 100%"
            v-model="addEmployeeObj.positionType_name"
            placeholder="请选择员工类型"
          >
            <el-option v-for="item in emptype" :key="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="ai_dialog_close()">取 消</el-button>
        <el-button type="primary" @click="addBilliardInfo()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 员工离职 -->
    <el-dialog title="员工离职" :visible.sync="departFormVisible" width="35%">
      <!-- 对话框主体区域 -->
      <el-form
        :model="addEmployeeObj"
        :rules="addEmployeeRules"
        ref="addEmployeeFormRef"
        label-width="100px"
      >
        <el-form-item label="员工名称:" prop="employees_name">
          <el-input v-model="addEmployeeObj.employees_name"></el-input>
        </el-form-item>
        <el-form-item label="联系信息:" prop="contact_info">
          <el-input v-model="addEmployeeObj.contact_info"></el-input>
        </el-form-item>
        <el-form-item label="离职原因:">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 7 }"
            v-model="addEmployeeObj.positionType_name"
          ></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="departFormVisible = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>

    <!--修改-->
    <el-dialog title="修改员工" :visible.sync="updateDialogForm" width="35%">
      <!-- 对话框主体区域 -->
      <el-form
        :model="updateEmployeeObj"
        :rules="updatemployeeRules"
        ref="updateEmployeeFormRef"
        label-width="100px"
      >
        <el-form-item label="员工名称:" prop="employees_name">
          <el-input v-model="updateEmployeeObj.employees_name"></el-input>
        </el-form-item>
        <el-form-item label="联系信息:" prop="contact_info">
          <el-input v-model="updateEmployeeObj.contact_info"></el-input>
        </el-form-item>
        <el-form-item label="员工类型:">
          <el-select
            style="width: 100%"
            v-model="updateEmployeeObj.positionType_name"
            placeholder="请选择员工类型"
          >
            <el-option v-for="item in emptype" :key="item" :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 对话框底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="bi_dialog_close()">取 消</el-button>
        <el-button type="primary" @click="updateBilliardInfo()"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      updateDialogForm: false,
      searchName: "", //搜索的名字
      employeeList: [], //员工集合
      paginationList: [], //分页后的数据
      currentPage: 1, //当前页码
      pageSize: 7, //每页的数据条数
      dialogFormVisible: false,
      addEmployeeObj: {
        employees_name: "",
        contact_info: "",
        positionType_name: "",
      },
      departFormVisible: false,
      updateEmployeeObj: {
        employees_name: "",
        contact_info: "",
        positionType_name: "",
        employee_id: 0,
      },
      emptype: ["前台", "服务员", "助教", "保洁", "安保", "股东"],
      addEmployeeRules: {
        employees_name: [
          { required: true, message: "请输入您的名字", trigger: "blur" },
          {
            min: 2,
            max: 4,
            message: "长度在2到4个字符之间",
            trigger: "blur",
          },
        ],
        contact_info: [
          {
            required: true,
            message: "请选择员工状态",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
      updatemployeeRules: {
        employees_name: [
          { required: true, message: "请输入您的名字", trigger: "blur" },
          {
            min: 2,
            max: 4,
            message: "长度在2到4个字符之间",
            trigger: "blur",
          },
        ],
        contact_info: [
          {
            required: true,
            message: "请选择员工状态",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (/^1[345789]\d{9}$/.test(value) == false) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    // 通过员工搜索
    searchByName() {
      if (this.searchName === "") {
        this.getlivestockInfo();
      } else {
        this.$axios
          .get(`/GetEmployeeName?employees_name=${this.searchName}`) //通过URL传参
          .then((res) => {
            console.log(res.data);
            //请求成功
            this.employeeList = res.data;
            //刷新分页
            this.getPageData();
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    // 每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.pageSize = val;
      this.getPageData();
    },
    // 当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getPageData();
    },
    // 获取全部数据
    getlivestockInfo() {
      let that = this;
      that.$axios
        .get("/getEmployeeAll") //补上后台接口即可
        .then((res) => {
          // 请求成功
          that.employeeList = res.data;
          // 获取页面数据后立马调用下面函数
          that.getPageData();
          console.log(res.data);
          return;
        })
        .catch((error) => {
          // 请求失败
          console.log("请求失败");
          console.log(error);
        });
    },
    // 添加员工信息
    addBilliardInfo() {
      this.$refs.addEmployeeFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写添加台球信息");
        await this.$axios
          .post("http://localhost:8080/addEmployee", this.addEmployeeObj)
          .then((res) => {
            this.$message.success({
              type: "success",
              message: res.data,
            });
            this.getlivestockInfo();
            this.ai_dialog_close();
          })
          .catch((error) => {
            console.log(error);
          });
        dateBilliardObj;
      });
    },
    //修改
    updateBilliardInfo() {
      this.$refs.updateEmployeeFormRef.validate(async (valid) => {
        if (!valid) return this.$message.error("请正确填写修改台球信息");
        await this.$axios
          .post("/updateEmployeeById", this.updateEmployeeObj)
          .then((res) => {
            this.$message.success({
              type: "success",
              message: res.data,
            });
            this.getlivestockInfo();
            this.update_dialog_close();
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    update_dialog_close() {
      this.clearUpdateDilog();
      this.updateDialogForm = false;
      // this.$refs.updateUserRules.clearValidate();
      this.$refs["updateEmployeeFormRef"].clearValidate();
    },
    clearUpdateDilog() {
      this.updateEmployeeObj.employees_name = "";
      this.updateEmployeeObj.contact_info = "";
      this.updateEmployeeObj.positionType_name = "";
    },
    //清空修改添加模态框
    clearAddDilog() {
      this.addEmployeeObj.employees_name = "";
      this.addEmployeeObj.contact_info = "";
      this.addEmployeeObj.positionType_name = "";
    },
    // 打开修改模态框
    openDialogFormUpdate(row) {
      this.updateDialogForm = true;
      this.updateEmployeeObj.employees_name = row.employees_name;
      this.updateEmployeeObj.contact_info = row.contact_info;
      this.updateEmployeeObj.positionType_name = row.positionType_name;
      this.updateEmployeeObj.employee_id = row.employee_id;
    },
    ai_dialog_close() {
      this.clearAddDilog();
      this.dialogFormVisible = false;
      this.$refs["addEmployeeFormRef"].clearValidate();
    },
    //修改取消
    bi_dialog_close() {
      // this.clearUpdateDilog();
      this.updateDialogForm = false;
      // this.$refs["updateEmployeeFormRef"].clearValidate();
    },
    // 获取分页之后的数据
    getPageData() {
      let start = (this.currentPage - 1) * this.pageSize;
      let end = start + this.pageSize;
      this.paginationList = this.employeeList.slice(start, end);
    },
    openDel(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  mounted() {
    this.getlivestockInfo();
  },
};
</script>
<style scoped>
.paginationBlock {
  margin-left: 90px;
}
.el-card .el-col {
  margin-right: 8px;
}
.allocationRoleDialog .el-dialog__body {
  padding: 15px 35px;
}
.slash-filled {
  display: block;
  width: 130px; /* 设置你需要的宽度 */
  height: 30px; /* 设置你需要的高度 */
  background: url(@/assets/img/null.jpg) no-repeat;
  background-size: cover;
}
</style>
